<template>
    <view class="ad_box">
	 <!-- <button type="default" @click="opentiaoshi()">打开调试</button> -->
		<view class="bg">
			<!-- <view class="num">总任务次数：{{taskNum}},已完成次数：{{completedNum}},还剩下次数：{{taskNum - completedNum}}</view> -->
			<!-- <view class="num">看1次广告，可以获得{{taskReward}}份饲料，<br>一天可以领取{{taskNum}}次,共{{taskReward*taskNum}}份饲料</view> -->
			<view class="imgBox">
 <!-- v-if="type == 0" -->
				<image :src="this.imgUrl" mode="widthFix" class="imgUrl"></image>
				<!-- <video id="myVideo":src="this.video_url" preload='auto' muted="false" v-else :style="{'height':videoHeight + 'px'}"></video> -->
				<!-- <video id="myVideo":src="video_url" preload='auto' muted="false" v-else :style="{'height':videoHeight + 'px'}" style="width: 100%;" @error="videoErrorCallback" ></video> -->
				<!-- <video :src="this.video_url":autoplay="true":page-gesture="true" :show-mute-btn="true":enable-play-gesture="true" v-else :style="{'height':videoHeight + 'px'}"></video> -->
				<span v-if="daojishi != '点击领取奖励'" :class="type == 0 ? 'black daojishi' : 'white daojishi'" :style="{'top':wordHeight + 'px','right':wordRight + 'px'}">{{daojishi}}</span>
				<span v-else @click="adMoney" :class="type == 0 ? 'black daojishi' : 'white daojishi'" :style="{'top':wordHeight + 'px','right':wordRight + 'px'}">{{daojishi}}</span>
			</view>
			<button type="default" v-if="daojishi != '点击领取奖励'" @click="closeAd" class="btnAd">放弃奖励<span></span></button>
			<button type="default" v-else @click="adMoney" class="btnAd">领取奖励<span></span></button>
			
			<!-- 饲料数量 -->
			<!-- <view class="siliao_zzc" v-if="zzc">
				<view class="siliao">
					<h3>领取成功</h3>
					<p>成功领取{{siliaoNum}}份饲料</p>
					<span @tap="zzc=false">领取</span>
				</view>
			</view> -->
		</view>
        <!-- <button type="default" @click="showInterstitialRewardedAd()">插屏激励广告</button> -->
	
   <!-- <button type="default" @click="reback()"><返回</button> -->
   </view>
</template>
<script>
	let timer = null;
	import {
		adList,adMoney
	} from "@/api/user";
	let data = {};
    export default {
		onShow() {
			clearInterval(timer)
			// console.log(jsBridge)
			let that = this;
			let uInfo = uni.getStorageSync('USER_INFO');
			this.userInfo = JSON.parse(uInfo);
			console.log('uinfo===',this.userInfo.uid)
			// that.adList();
			adList({
				uid:this.userInfo.uid
			}).then(({
				data
			}) => {
				if(data != ''){
					this.imgUrl = data[0].thumb;
					this.type = data[0].type;
					// this.video_url = data[0].video_url;
					this.id = data[0].id;
					let daojishi = 8;
					// console.log('video===',this.video_url)
					timer = setInterval(function(){	
					  --daojishi
					  if(daojishi>0){
						  console.log('dcaojis',daojishi)
						  that.daojishi = daojishi + 's领取奖励'
					  }else{
						that.daojishi = '点击领取奖励',
						clearInterval(timer)
						return; 
					  }
					},1000)
				}else{
					this.daojishi = '';
				}
			});
			// 元素高度
			uni.getSystemInfo({
				success:(res)=>{
					// 视频高度
					let height = res.screenHeight - 40
					this.videoHeight = height
					// 广告右上角文字高度
					let wordHeight = res.screenHeight
					this.wordHeight = (wordHeight - 414) / 2
					// 右间距
					let wordRight = res.screenWidth
					this.wordRight = (wordRight - 200) / 2 
				}
			})
		},
		// onReady() {
		// },
		onLoad(){
		},
		// onReady:function (res) {
		// 	// 获取 video 上下文 videoContext 对象
		// 	    this.videoContext = uni.createVideoContext('myVideo',this);
		// 	    // 进入全屏状态
		// 	    this.videoContext.requestFullScreen();
		// },
		methods: {
			closeAd(){
				clearInterval(timer);
				uni.navigateBack(2);
			},
			adMoney(){
				let that = this
				let uid = this.userInfo.uid
				console.log('uid===>',uid)
				adMoney({
					uid : uid,
					id : this.id
				}).then(({
					data,msg
				}) => {
					if(msg == 'OK'){
						uni.showToast({
							title:'领取奖励成功',
							icon:'none',
							duration:1500,
							success: () => {
								setTimeout(function() {
									uni.navigateBack(2)
									// uni.navigateTo({
									// 	url:'/pages/exchange/exchange'
									// })
								}, 1500);
							}
						})
					}else{
						uni.showToast({
							title:msg,
							icon:'none'
						})
					}
				})
			},
			// videoErrorCallback: function (e) {
			// 			console.log('视频错误信息:')
			// 			console.log(e)
			// 		}
			// adList(){
			// 	adList({
					
			// 	}).then(({
			// 		data
			// 	}) => {
			// 		if(data != ''){
			// 			console.log('data',data)
			// 			console.log('data',data[0])
			// 			this.imgUrl = data[0].imgUrl;
			// 			// let daojishi = 15;
			// 			timer = setInterval(function(){	
			// 				// console.log('that',that)
			// 			  --that.daojishi
			// 			  if(that.daojishi>0){
			// 				  // that.daojishi = daojishi + 's后发放环保袋'
			// 				  that.daojishi += 's后发放环保袋'
			// 			  }else{
			// 				  that.daojishi = '点击下方领取按钮',
			// 				clearInterval(timer)
			// 				return; 
			// 			  }
			// 			},1000)
			// 		}
			// 	})
			// 	// let info2 = {};
			// 	// https://yp.cqmv.com/api/user/ad_money
			// 	// this.$request('https://yp.cqmv.com/api/get_ad_list',info2,'POST').then(res=>{
			// 	// 	console.log('res===>') 
			// 	// 	this.imgUrl = res.data[0].imgUrl
			// 	// })
			// }
		},
		onBackPress() {
			console.log("111111111111")
		},
        data() {
            return {
				taskNum:'',
				completedNum:"",
				siliaoNum:"",
				taskReward:"",
				zzc:false,
				imgUrl:'',
				daojishi:'8s领取奖励',
				type:0,
				video_url:'',
				videoHeight:'',
				userInfo:{},
				id:'',
				src:'',
				wordRight:'',
				wordHeight:'',
            }
        },
    }
</script>

<style lang="scss">
	uni-page-body{
		height: 100%;
	}
	.ad_box{
		height: 100%;
		.bg{
			width: 100%;
			height:100%;
			position: fixed;
			background: url(../../hybrid/html/resource/assets/icon/skin/5003.jpg) no-repeat center;
			background-size: 100% 100%;
			text-align: center;
			.imgBox{
				width: 100%;;
				// width: 85.4%;
				height:100%;
				padding-top: 50rpx;
				// margin-left: 7.3%;
				position: relative;
				text-align: center;
				position: relative;
				.imgUrl{
					width: 500rpx; 
					height: 800rpx;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					margin: auto;
				}
				span{
					position: absolute;
					// right: 63px;
					// right: 0%;
					// top: 168rpx;
					// right: 20rpx;
				}
				.black{
					color: #000;
				}
				.white{
					color: #fff;
				}
				.daojishi{
					z-index: 1000;
				}
			}
			.btnAd{
				height: 80rpx;
				line-height: 80rpx;
				
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
			}
			.num{
				text-align: center;
				font-size: 44upx;
				color: #540fdb;
				padding: 48upx 24upx 0 24upx;
			}
			button{
				position: absolute;
				bottom: 0;
				width: 100%;
				background: #8FAD2F;
				color: #fff;
				span{
					// margin-left: 130upx;
					position: absolute;
					right: 30upx;
				}
			}
			.siliao_zzc{
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(0,0,0,.5);
				.siliao{
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					width: 390upx;
					height: 230upx;
					background: #fff;
					margin:  auto;
					text-align: center;
					h3{
						margin: 20upx 0;
					}
					span{
						display: block;
						background: #12CF3B;
						border-radius: 12upx;
						width: 180upx;
						height: 60upx;
						line-height: 60upx;
						color: #fff;
						margin: 20upx 0 20upx 105upx;
					}
				}
			}
		}
	}
	
</style>